<script setup lang="ts">
import bluePointImg from '@/assets/images/global/popIcon/bluePoint.png';
import redPointImg from '@/assets/images/global/popIcon/redPoint.png';
</script>

<template>
  <div class="transfer-hongkong">
    <div class="hongkongTitle">
      <div class="title">
        <span class="left">香港</span>
        <span class="right">本地传输</span>
      </div>
    </div>

    <div class="map_box">
      <!-- 调用全局地图组件 -->
      <LeafletMap ref="mapRef" />
      <div class="bottomTips">
        <div class="content">
          <img class="cloudImg_1" :src="bluePointImg" alt="" />
          <span class="cloudTittle">覆盖的POP节点</span>
        </div>
        <div class="content">
          <img class="cloudImg_2" :src="redPointImg" alt="" />
          <span class="cloudTittle">我司可达POP节点</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.transfer-hongkong {
  .hongkongTitle {
    width: 100%;
    height: 150px;
    background-color: #eff3f5;
    display: flex;
    justify-content: center;
    align-items: center;
    .title {
      text-align: center;
      font-size: 36px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 28px;
      letter-spacing: 4px;
      font-family: 'SourceHanSansCN-Normal';
      .right {
        color: #484848;
      }
      .left {
        font-weight: 700;
        /* 定义渐变色背景 */
        background: linear-gradient(to right, #5b9bc7, #3e5898);
        /* 设置背景剪切区域为文本 */
        -webkit-background-clip: text;
        /* 设置文本填充颜色为透明，只显示渐变色背景 */
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .map_box {
    position: relative;
    margin-top: -2px;
    width: 100%;
    height: 850px;
    .bottomTips {
      position: absolute;
      left: 50%;
      bottom: 6%;
      transform: translateX(-50%);
      z-index: 500;
      display: flex;
      align-items: center;
      border: 1px solid #ffffff;
      border-radius: 8px;
      background-color: rgba(255, 255, 255, 0.8);
      width: 280px;
      height: 26px;
      padding-left: 8px;

      .content {
        margin-right: 10px;
        vertical-align: middle;
        display: flex;
        align-items: center;

        .cloudTittle {
          color: #000000;
        }
        .cloudImg_1 {
          width: 18px;
          height: 18px;
          margin-right: 2px;
        }
        .cloudImg_2 {
          width: 17px;
          height: 17px;
          margin-right: 2px;
        }
      }
      .content:nth-last-child(1) {
        margin-right: 0;
      }
    }
  }
}
</style>
